<template>
  <div class="item">
    <div class="cover">
      <el-image
        style="width: 110px; height: 110px"
        :src="proxy.imageUrl + cover"
        fit="fill"
        @click="toCategoryDetail"
      />
    </div>
    <div class="info">
      <div class="categoryName" @click="toCategoryDetail">{{ categoryName }}</div>
      <div class="categoryDesc">{{ categoryDesc }}</div>
      <div class="blogCount">文章数:{{ blogCount }}</div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import bus from '../utils/EventBus'

const { proxy } = getCurrentInstance();
const router=useRouter()
const props = defineProps({
  cover: String,
  categoryName: String,
  categoryDesc: String,
  blogCount: Number,
  categoryId: Number,
});

const toCategoryDetail = ()=>{
  router.push("../category/" + props.categoryId);
  bus.emit("toCategory");
}
</script>

<style lang="scss" scoped>
.item{
  display: flex;
  padding: 10px;
  height: 130px;
  box-sizing: border-box;
  border: 1px solid #ddd;

  .cover {
    width: 110px;
    height: 110px;
    cursor: pointer;
  }
  .info{
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .categoryName{
      color: #79bbff;
      cursor: pointer;
    }

    .categoryDesc{
      height: 36px;
      width: 140px;
      font-size: 14px;
      line-height: 18px;
      overflow: hidden;
      text-overflow: -o-ellipsis-lastline;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      cursor: default;
    }

    .blogCount{
      font-size: 14px;
      line-height: 18px;
      opacity: .5;
      cursor: default;
    }
  }
}
</style>